<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
	<title>湖南省自来水公司营销管理信息系统</title> 
	
	<link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title" />	
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title" />	
	
	<link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title" />
	
	<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
	<script src="../js/jquery/jquery-3.3.1.js"></script>
	<script src="/webjars/vue/2.5.17/dist/vue.js"></script>

	<script src="../js/bootstrap.min.js"></script>
	<script src="../layui/layui.all.js" type="text/javascript" ></script>
</head> 
 
<body> 

<div id="wrapper">

	<div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>

	<script>
		$(function () {
			setTimeout(function(){4
				var yearmonth1=$("#yearmonth1").val().split(",");
				$("#readyear1").html(yearmonth1[0]+''+yearmonth1[1]);
				var yearmonth2=$("#yearmonth2").val().split(",");
				$("#readyear2").html(yearmonth2[0]+''+yearmonth2[1]);
			},500);
		})
	</script>
	<div id="content" class="xgrid" >

		<div class="x12">
			
			<h2>零吨位用户查询</h2>
			
			<div class="searchDiv">
				抄表年月 
				<span class="between">
							<select class="medium" id="yearmonth1">
							<option v-for="y in yearmonth" :value="y.readYear+','+y.readMonth">{{y.readYear}}{{y.readMonth}}</option>
						 </select>

				-
					<select class="medium" id="yearmonth2">
							<option v-for="y in yearmonth" :value="y.readYear+','+y.readMonth">{{y.readYear}}{{y.readMonth}}</option>
						 </select>
				</span>
				
				表册 <select class="medium" id="volume">
							<option value="">所有</option>
				<optgroup :label="a.areaName" v-for="a in area">
					<option v-for="v in volume" v-if="a.id==v.areaID" :value="v.id">{{v.volumeName}}</option>
				</optgroup>
					</select>

				是否复核 <select class="medium" id="audit">
							<option value="1">是</option>
							<option value="0">否</option>
						 </select>
				
				<button class="btn btn-small btn-icon btn-find" @click="querybylike()"><span></span>查询</button>
			</div>
			
			
			<div class="reportTitle">
				零吨位用户情况报表
			</div>	
			<div class="height24">
				<div style="float:left;width:250px;">抄表年月：<span id="readyear1"></span> - <span id="readyear2"></span></div>
				<div style="float:left;width:200px;">表册：所有</div>
				<div style="float:left;width:200px;">总用户数：{{sumAmount}}户</div>
			</div>
			<table class="report">
				<thead>
					<tr>
						<th width="100">用户编码</th>
						<th>用户姓名</th>
						<th width="100">上月底数</th>
						<th width="100">本月抄数</th>
						<th width="100">实用水量</th>
						<th width="60">是否复核</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="r in read">
						<td class="center"  v-text="r.UserNo">加载中...</td>
						<td class="" v-text="r.UserName">加载中...</td>
						<td class="right"  v-text="r.PreValue">加载中...</td>
						<td class="right" v-text="r.CurValue">加载中...</td>
						<td class="right" v-text="r.Amount">0</td>
						<td class="center"><span v-if="r.Audit=1">是</span>
							<span v-if="r.Audit=0">否</span>
						</td>
					</tr>
					</tbody>
				</table>
				<div class="page">
					<a href="#" @click="query()">第一页</a>
					<a  href="javascript:;" @click="query(pageInfo.current-1)" v-if="pageInfo.current!=1">上一页</a>
					<input class="pageIndex" :value="pageInfo.current"/> / <input class="pageCount" readonly="readonly" :value="pageInfo.pages" />
					<a href="#" @click="query(pageInfo.current+1)"  v-if="pageInfo.current!=pageInfo.pages && pageInfo.pages!=0">下一页</a>
					<a href="#" @click="query(pageInfo.pages-0)">第未页</a>
				</div>
				
		</div> <!-- .x12 -->
		
	</div> <!-- #content -->
	<script>
		var content=new Vue({
			el:"#content",
			data:{
				volume:"",
				yearmonth:"",
				area:"",
				read:"",
				pageInfo:"",
				sumAmount:"",
				queryzero: {
					current:"",
					yearmonth1:"",
					yearmonth2:"",
					Audit:"",
					VolumeId:"",
				},
			},
			methods:{
				querybylike(){
					content.queryzero.yearmonth1=$("#yearmonth1").val();
					content.queryzero.yearmonth2=$("#yearmonth2").val();
					content.queryzero.Audit=$("#audit").val();
					content.queryzero.VolumeId=$("#volume").val();
					$.getJSON("/rd-read/queryReadZero",content.queryzero,function(json){
						content.sumAmount=json.data.map.sum;
						content.read=json.data.map.page1.records;
						content.pageInfo=json.data.map.page1;
					});
				},
				query(current){
					content.queryzero.current=current;
					$.getJSON("/rd-read/queryReadZero",content.queryzero,function(json){
						content.sumAmount=json.data.map.sum;
						content.read=json.data.map.page1.records;
						content.pageInfo=json.data.map.page1;
						//var sum=0;
						// $.each(json.records,function(){
						// 	sum+=this.Amount;
						// })

					});
				}
			},
			created(){
				$.getJSON("/rd-read/queryReadZero",function(json){
					content.sumAmount=json.data.map.sum;
					content.read=json.data.map.page1.records;
					content.pageInfo=json.data.map.page1;
					//var sum=0;
					// $.each(json.records,function(){
					// 	sum+=this.Amount;
					// })

				});
				//查询辖区
				$.getJSON("/SyArea/queryall",function(json){
					content.area=json;
				});
				//查询表册
				$.getJSON("/rd-volume/queryall",function(json){
					content.volume=json.data.list;
				});
				$.getJSON("/rd-yearmonth/queryall",function(data){
					content.yearmonth=data
				})
			}
		})

	</script>
	<div id="footer">		
		<div class="content_pad">			
			<p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>.   技术支持 <a href="#">职业教育</a>.</p>
		</div> <!-- .content_pad -->
	</div> <!-- #footer -->
	
</div> <!-- #wrapper -->

<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>
<script src="../My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript">
	
$(document).ready ( function () 
{
	Dashboard.init ();
	
});


</script>

</body> 
 
</html>